import { createTheme, alpha } from '@mui/material';

const getTheme = (darkMode, isXs = false) => {
  // Define base colors based on the mode
  const baseColors = darkMode 
    ? {
        primary: '#2196f3',
        background: '#121212',
        text: '#ffffff',
      }
    : {
        primary: '#1976d2',
        background: '#f5f5f5',
        text: '#000000',
      };

  return createTheme({
    palette: {
      mode: darkMode ? 'dark' : 'light',
      primary: {
        main: baseColors.primary,
      },
      background: {
        default: baseColors.background,
      },
    },
    typography: {
      allVariants: {
        fontFamily: 'Roboto',
        letterSpacing: '-0.01em',     // Tighter letter spacing for all text
        wordSpacing: '-0.025em',      // Slightly tighter word spacing
        lineHeight: 1.4,              // More compact line height
      },
      // Global typography spacing adjustments
      paragraph: {
        marginBottom: '0.75rem',      // Reduce paragraph spacing
      },
      gutterBottom: {
        marginBottom: '0.75rem',      // Adjust gutter bottom
      },
    },
    spacing: (factor) => `${0.8 * factor}rem`,  // Scale down default spacing by 20%
    components: {
      // Customize the AppBar component to have a glassmorphism effect
      MuiAppBar: {
        styleOverrides: {
          root: {
            backgroundColor: alpha(baseColors.background, 0.7),
            backdropFilter: 'blur(10px)',
            boxShadow: `0 8px 32px 0 ${alpha('#000000', 0.1)}`,
            borderBottom: `1px solid ${alpha(baseColors.text, 0.1)}`,
            // Adding subtle highlight effect to enhance the frosty look
            '&::before': {
              content: '""',
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              height: '1px',
              background: `linear-gradient(90deg, 
                ${alpha(baseColors.text, 0)}, 
                ${alpha(baseColors.text, 0.2)}, 
                ${alpha(baseColors.text, 0)}
              )`,
            },
          },
        },
      },
      // You can also adjust the Toolbar to complement the glassmorphism effect
      MuiToolbar: {
        styleOverrides: {
          root: {
            padding: '0.5rem 1rem',
          },
        },
      },
    },
  });
};

export default getTheme;